
<template>
  <div class="Page_VisitStyleBox">
    <div class="Page_VisitStyleLeftBox">
      <PageHomeFromRouer></PageHomeFromRouer>
    </div>
    <div class="Page_VisitStyleRightBox">
      <div class="Page_VisitStyleHeadTitleBox">
        <PageHeadRigthFrom></PageHeadRigthFrom>
      </div>
      <div class="Page_VisitStyleBreadcrumb">
        <a-breadcrumb class="Header_Breadcrumb">
          <a-breadcrumb-item><a href="/">工作台</a></a-breadcrumb-item>
          <a-breadcrumb-item><a href="">访问统计</a></a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="Page_VisitStyleBody">
        <div class="Page_VisStyleBodyIpt">
          <ul>
            <li>
              IP:&nbsp;&nbsp;&nbsp;<input
                type="text"
                v-model="val"
                placeholder="请输入IP地址"
              />
            </li>
            <li>
              浏览器:<input
                type="text"
                v-model="val"
                @input="search"
                placeholder="请输入浏览"
              />
            </li>
            <li>
              UA:&nbsp;&nbsp;&nbsp;<input
                type="text"
                 v-model="val"
                placeholder="请输入 User Agent"
              />
            </li>
            <li>
              内核:&nbsp;&nbsp;&nbsp;<input
                type="text"
                 v-model="val"
                placeholder="请输入内核"
              />
            </li>
            <li>URL:<input type="text" placeholder="请输入URL" /></li>
            <li>
              OS:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
                type="text"
                 v-model="val"
                placeholder="请输入操作系统"
              />
            </li>
            <li>
              地址:&nbsp;&nbsp;&nbsp;<input
                type="text"
                 v-model="val"
                placeholder="请输入操作地址"
              />
            </li>
            <li>
              设置:&nbsp;&nbsp;&nbsp;<input
                type="text"
                 v-model="val"
                placeholder="请你输入设备"
              />
            </li>
          </ul>
          <ol>
            <li><button id="SearchBtn">搜索</button></li>
            <li><button @click="ReturnBtn" id="ResetBtn">重置</button></li>
          </ol>
        </div>
        <div class="Page_VisStyleFromBox">
          <dl>
            <dt>
              <p><input type="checkbox" /></p>
              <p>URL</p>
              <p>IP</p>
              <p>内核</p>
              <p>操作系统</p>
              <p>设备</p>
              <p>地址</p>
              <p>访问时间</p>
              <p>操作</p>
            </dt>
            <dd v-for="(item, idx) in data" :key="idx">
              <p>
                <router-link :to="item.url">{{item.url}}</router-link>
              </p>
              <p>{{ item.ip }}</p>
              <p>{{ item.http }}</p>
              <p>{{ item.system }}</p>
              <p>{{ item.time }}</p>
              <p @click="ViSitDel(item)"><a href="#">删除</a></p>
            </dd>
          </dl>
          <a-pagination v-model:current="current" :total="1" show-less-items />
        </div>
        <dl class="FooterDl">
          <dt>
            <a href="https://github.com/fantasticit/wipi"
              ><img src="../../assets/b.png.png" alt=""
            /></a>
          </dt>
          <dd>Copyright ® 2022 Designed by Fantasticit.</dd>
        </dl>
      </div>
    </div>
  </div>
</template>


<script>
import axios from "axios";
import PageHeadRigthFrom from "../../components/PageHeadRigthFrom";
import PageHomeFromRouer from "../../components/PageHomeFromRouer";

export default {
  data() {
    return {
      data: [],
      val:"",
    };
  },
  beforeCreate() {},

  created() {
    this.VisMockArray(); //数据函数
  },
  methods: {
    ReturnBtn(){//重置按钮
      this.val = "";
      this.VisMockArray(); 
    },
    async search() {
      //搜索
      let res = await axios.post("/api/SearchVisit", { val: this.val });
      this.data = res.data.list;
      this.VisMockArray(); 
    },
    async VisMockArray() {
      let res = await axios.post("/api/visitMockData");
      console.log(res.data, "res");
      this.data = res.data.data;
    },
    async ViSitDel(item) {
      let res = await axios.delete(`/api/VisitMock/${item.id}`);
      console.log(res, "res");
      alert(res.data.message);
      this.VisMockArray(); 
    },
  },
  components: {
    PageHomeFromRouer,
    PageHeadRigthFrom,
  },
};
</script>

<style>
.Page_VisitStyleBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.Page_VisitStyleLeftBox {
  width: 13%;
  height: 100%;
  overflow: hidden;
  background: #001529;
  border-right: 1px solid #ccc;
}
.FooterDl{
  text-align: center; 
  margin-top: 20px;
}
.Page_VisitStyleRightBox {
  width: 98%;
  height: 100%;
}
.Page_VisitStyleHeadTitleBox {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Page_VisitStyleBreadcrumb {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Header_Breadcrumb {
  margin: 12px 10px;
  display: inline-block;
}
.Page_VisitStyleBody {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #eff2f5;
}
.Page_VisStyleBodyIpt {
  width: 96%;
  height: 180px;
  margin-left: 30px;
  margin-top: 30px;
  background: #fff;
  border-radius: 5px;
}
.Page_VisStyleFromBox {
  width: 96%;
  height: 500px;
  margin-left: 30px;
  margin-top: 30px;
  background: #fff;
  border-radius: 5px;
  overflow-x: auto;
}
.Page_VisStyleFromBox > dl {
}
.Page_VisStyleFromBox > dl > dt {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  justify-content: space-around;
}
.Page_VisStyleFromBox > dl > dt > p {
  margin-top: 10px;
}
.Page_VisStyleFromBox > dl > dd {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  justify-content: space-around;
}
.Page_VisStyleFromBox > dl > dd > p {
  width: 170px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-right: 1px solid #ccc;
}
#Ulr {
  width: 100px;
  height: 50px;
  flex-shrink: 0;
}
.Page_VisStyleBodyIpt > ul {
  display: flex;
  flex-wrap: wrap;
}
.Page_VisStyleBodyIpt > ul > li {
  flex-shrink: 0;
  margin-left: 50px;
  width: 300px;
  margin-top: 20px;
}
.Page_VisStyleBodyIpt > ul > li > input {
  border-radius: 5px;
  width: 230px;
  padding: 5px;
}
.Page_VisStyleBodyIpt > ol {
  display: flex;
}
.Page_VisStyleBodyIpt > ol > li {
  width: 80px;
  height: 30px;
  margin-left: 50px;
  margin-top: 15px;
}
.Page_VisStyleBodyIpt > ol > li > button {
  width: 80px;
  height: 30px;
  outline: none;
  border-radius: 5px;
}
#SearchBtn {
  margin-left: 30px;
  background: skyblue;
  color: red;
  font-weight: bold;
}
#ResetBtn {
  background: none;
  border: 2px solid #ccc;
}
</style>
